<template>
  <div class="login">
    <div class="nav">
      <img src="../assets/images/logo.png" />
      <h1>物联网智慧仓储管理系统</h1>
    </div>
    <div class="block">
      <div class="block-nav">
        <img src="../assets/images/light.png" />
      </div>
      <ul>
        <li>有利于简化仓库作业</li>
        <li>确保管理规范确切执行</li>
        <li>优化作业，提高效率</li>
        <li>易于和AS/RS自动设备集成</li>
        <li>实现智能化仓库管理</li>
      </ul>
      <div class="loginBlock">
        <span>后台登录</span>
        <el-form label-width="0px" :model="user" :rules="rules">
          <el-form-item label prop="userid">
            <el-input v-model="user.userid" placeholder="账号"> </el-input>
          </el-form-item>
          <el-form-item label prop="pwd" style="border-radius: 0px">
            <el-input v-model="user.pwd" placeholder="密码" type="password"> </el-input>
          </el-form-item>
          <el-form-item label prop="code" style="width: 150px">
            <el-input
              v-model="user.code"
              placeholder="验证码"
              class="yz"
              :style="{ display: 'inline' }"
            />
            <img
              src="https://520mg.com/include/vdimgck.php"
              ref="vdimg"
              @click="changePic"
            />
          </el-form-item>
          <el-form-item>
            <router-link to="/">立即注册</router-link>
            <router-link to="/">忘记密码</router-link>
          </el-form-item>
          <el-form-item>
            <el-button
              :style="{ width: '100%', height: '40px' }"
              @click.prevent="store.dispatch('loginAction', user)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom">
      <span
        >版权所有：新开普电子股份有限公司 豫ICP备08102576号
        未经授权本站内容禁止私自转载使用！</span
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
// import { UserFilled, Lock } from "@element-plus/icons-vue";
const user = reactive({
  dopost: "login",
  fmdo: "login",
  userid: "",
  pwd: "",
  code: "",
});
const rules = reactive({
  userid: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 18, message: "长度3-18", trigger: "blur" },
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 18, message: "长度3-18", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 4, max: 4, message: "长度4", trigger: "blur" },
  ],
});
// 申明一个引用对象
const vdimg = ref();
// 定义一个改变图片的方法
function changePic() {
  // 修改图片的src 为地址+当前时间
  vdimg.value.src = "https://520mg.com/include/vdimgck.php?data=" + new Date();
}
</script>
<style scoped>
.login {
  height: 547px;
  min-width: 1000px;
}
.bottom {
  position: absolute;
  bottom: 10px;
  right: 260px;
  font-size: 12px;
  color: #999;
}
.block-nav {
  position: absolute;
  left: 316px;
  top: 25px;
}
.loginBlock span {
  font-size: 16px;
  padding-bottom: 10px;
}
.loginBlock .el-input__inner {
  border-radius: 0px;
  height: 40px;
  width: 250px;
  font-size: 14px;
  color: #999;
}
.block {
  height: 400px;
  width: 100%;
  background-color: #2d3e50;
  position: relative;
}
.block ul {
  left: 623px;
  top: 80px;
  font-size: 20px;
  color: #7696b9;
  font-weight: 700;
  line-height: 45px;
  position: absolute;
  list-style: none;
  vertical-align: middle;
  font-weight: normal;
}
.loginBlock img {
  position: absolute;
  right: -100px;
  height: 30px;
}
.nav {
  height: 95px;
  width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.nav h1 {
  padding-left: 15px;
  font-size: 30px;
  color: #333;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
  font-weight: normal;
}
.nav img {
  height: 36px;
  width: 52px;
  padding-right: 15px;
}
.login .el-carousel__container {
  height: 100vh;
  width: 100%;
}
</style>
<style scoped>
.login {
  position: relative;
}
.carousel {
  width: 100vw;
  height: 100vh;
}
.carousel img {
  width: 100%;
}
.loginBlock {
  position: absolute;
  right: 15%;
  top: 35px;
  width: 280px;
  height: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
